﻿<style type="text/css">
    .options div {
        margin-top: 5px;
        margin-bottom:5px;
    }
</style>
<div id="grid"></div>
<div id="dlgAdd" style="display:none;">
    <div class="options">
        <div>
            节点名称: <input id="txtNode" type="text" style="width:200px;" />
        </div>
        <div>
            审批模式：
            <input id="UserMode" type="radio" name="Mode" checked="checked" /> 个人/多人
            <input id="RoleMode" type="radio" name="Mode" /> 角色
            <input id="ParentUserMode" type="radio" name="Mode" /> 直属上级
            <input id="PositionMode" type="radio" name="Mode" /> 职位
            <input id="DeptMode" type="radio" name="Mode" />部门
        </div>
        <div>
            <div>
            自动匹配申请部门：<input id="RoleInDept" type="checkbox" checked="checked" />
            </div>
            <div>
            审批角色:             
            <select id="ddlRoles">
                <option value="">请选择</option>
                @foreach (var role in ViewBag.Roles) { 
                <option value="@role.Id">@role.RoleName</option>
                }
            </select> （匹配角色生效时)
            </div>
            <div>
                <select id="ddlPositions">
                    <option value="">请选择</option>
                </select>
            </div>
            <div>
                <select id="ddlDept">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
    </div>
    <div id="gridUsers"></div>
</div>


<script type="text/javascript">
    var __changed = false;
    var _window = {};
    _window.g = {
        OK: '确定',
        CANCEL: '取消',
        NAME: 'Node'
    };

    _window.click = function (item) {
        var m = _window[item.method];
        if (m) m();
    }

    _window.options = {
        /*grid*/
        title: '审批流程顺序信息',
        columns: [
            /* 表格字段 */
            { display: '节点', name:'Name', width: 100 }
            , {
                display: '姓名', width: 300,
                render: function (i) {
                    switch (i.Action) {
                        case 1:
                            return i.UserName;

                        case 2:
                            var s = "";
                            $.each(i.Argument, function (j, e) {
                                s += " [" + e.UserName + "]";
                            });

                            return s;

                        default:
                            return '&nbsp;';
                    }
                }
            }
            , { name: 'Org', display: '部门', width: 100 }
            , { name: 'Position', display: '职位', width: 100 }
            , { name: 'Role', display: '角色', width: 100 }
            , {
                name: 'RoleInDept', display: '自动匹配申请部门', width: 100,
                render: function (i) {
                    if (i.RoleInDept == null)
                        return '';
                    return i.RoleInDept ? '是' : '否';
                }
            }
            , {
                display: '审批方式', width: 100,
                render: function (i) {
                    switch (i.Action) {
                        case 1:
                            return '单人';
                        case 2:
                            return '多人';
                        case 3:
                            return '角色';
                        case 4:
                            return '直属上级';
                    }

                    return '&nbsp;';
                }
            }
        ],
        toolbar: [
            { method: 'back', text: '返回', click: _window.click, icon: 'back' }
            , { line: true }
            , { method: 'add', text: '增加', click: _window.click, icon: 'add' }
            , { line: true }
            //, { method: 'update', text: '修改', click: _window.click, icon: 'modify' }
            //, { line: true }
            , { method: 'delete1', text: '删除', click: _window.click, icon: 'delete' }
            , { line: true }
            , { method: 'up', text: '上移', click: _window.click, icon: 'up' }
            , { line: true }
            , { method: 'down', text: '下移', click: _window.click, icon: 'down' }
            , { line: true}
            , { method: 'save', text: '保存', click: _window.click, icon: 'modify' }
        ],

        userColumns: [
            { name: 'UserName', display: '姓名' }
            , { name: 'Org', display: '部门' }
            , { name: 'Position', display: '职位' }
        ],

        /*dialog*/
        titleAdd: '添加',
        titleUpdate: '修改',
        dlgWidth: 600,
        dlgHeight: 480,

        /*form*/
        addFields: [
            /* 表单字段 */
            //{ name: 'NAME', type: 'text', label: 'Name', validate: { required: true } }
        ],
        updateFields: [
            /* 表单字段 */
        ],
        inputWidth: 170,
        labelWidth: 90,
        space: 40,
        addPrefixID: 'formAdd_',
        updatePrefixID: 'formUpdate_',

        updateQuestion: '请先选择需要修改的行',
        deleteQuestion: '请先选择需要删除的行',
        deleteConfirm: '是否删除当前选择项？',
        flow: '@Html.Raw(ViewBag.FlowId)'
    };
    
    _window.control = {
        grid: null,
        dlgAdd: null,
        dlgUpdate: null,
        //formAdd: null,
        //formUpdate: null
        gridUsers: null
    };

    _window.getAddControl = function (id) {
        return liger.get(this.options.addPrefixID + id);
    }

    _window.getUpdateControl = function (id) {
        return liger.get(this.options.updatePrefixID + id);
    }
    
    _window.init = function () {
        $.metadata.setType("attr", "validate");
        this.form();
        this.grid();
    }

    _window.load = function (g, url, d) {
        var complete = false;
        $.post(url, d, function (data) {
            complete = true;
            g.loadData(data);
            g.gridloading.hide(100);
        }, 'json');

        var n = setInterval(function () {
            clearInterval(n);
            if (!complete) {
                g.gridloading.show();
            }
        }, 100);
    }

    _window.form = function (name) {
        if (name) return _window.control[name];
        //_window.control.formAdd = $('#formAdd').ligerForm({
        //    fields: this.options.addFields,
        //    validate: {}
        //});

        // _windows.control.formUpdate = $('#formUpdate').ligerForm({
        //    inputWidth: this.options.inputWidth,
        //    labelWidth: this.options.labelWidth,
        //    space: this.options.space,
        //    fields: this.options.updateFields,
        //    validate: {}
        //});
    }

    _window.dialog = function (name, row) {
        var id = 'dlg' + name;
        if (this.control[id]) {
            this.control[id].show();
        }
        else {
            this.control[id] = $.ligerDialog.open({
                show: false,
                target: $('#' + id),
                width: this.options.dlgWidth,
                height: this.options.dlgHeight,
                title: this.options["title" + name],
                isResize: true,
                modal: true,
                buttons: [
                    {
                        text: _window.g.OK, onclick: function () {
                            var m = _window['On' + name];
                            if (m) m();
                        }
                    },
                    {
                        text: _window.g.CANCEL, onclick: function () {
                            _window.control[id].hide();
                        }
                    }
                ]
            });
        }

        _window.control[id].row = row || null;
        var event = _window['On' + name + 'Show'];
        if (event)
            event(row);
    }

    _window.grid = function () {
        if (this.control.grid)
            return this.control.grid;

        this.control.grid = $('#grid').ligerGrid({
            title: this.options.title,
            columns: this.options.columns,
            toolbar: { items: this.options.toolbar },
            rownumbers: true,
            resizable: false,
            frozen: false,
            pageSize: 20,
            dataAction: 'local'
        });

        _window.load(this.control.grid, '/API/Node/Query', { id: _window.options.flow });

        return this.control.grid;
    }

    _window.add = function () {
        _window.dialog('Add');
    }

    //_window.update = function () {
    //    DoAction(
    //        _window.control.grid,
    //        function () {
    //            _window.dialog('Update');
    //        },
    //        _window.options.updateQuestion);
    //}

    _window.delete1 = function () {
        DoActionConfirm(
            _window.control.grid,
            _window.OnDelete,
            _window.options.deleteQuestion,
            _window.options.deleteConfirm);
        __changed = true;
    }

    _window.up = function () {
        var r = _window.control.grid.getSelectedRow();
        if (r == null)
            return;

        _window.control.grid.up(r);
        __changed = true;
    }

    _window.down = function () {
        var r = _window.control.grid.getSelectedRow();
        if (r == null)
            return;

        _window.control.grid.down(r);
        __changed = true;
    }

    _window.back = function () {
        document.location.href = '/WF/Home/Flows';
    }

    _window.save = function () {
        if (!__changed) {
            $.ligerDialog.success('保存成功');
            return;
        }

        var data = _window.control.grid.getData();
        var json = liger.toJSON(data);
        $.post(
            '/API/Node/Save',
            {                
                data: json,
                flow: _window.options.flow
            },
            function (res) {
                if (res.code == 0) {
                    $.ligerDialog.success('保存成功');
                }
                else {
                    $.ligerDialog.error('保存失败, 原因: ' + res.msg);
                }
            }, 'json');
    }

    function OnUserMode() {
        var rows = _window.control.gridUsers.getSelectedRows();
        if (rows == null || rows.length == 0) {
            alert('请选择审批人');
            return false;
        }

        if (rows.length == 1) {
            _window.control.grid.addRow({
                Action: 1,
                Name: $('#txtNode').val(),
                Argument: null,
                UserId: rows[0].UserId,
                UserName: rows[0].UserName,
                OrgId: rows[0].OrgId,
                Org: rows[0].Org,
                PositionId: rows[0].PositionId,
                Position: rows[0].Position
            });
        } else if (rows.length > 1) {
            var args = [];
            $.each(rows, function (i, n) {
                args.push({ UserId: n.UserId, UserName: n.UserName });
            });

            _window.control.grid.addRow({
                Action: 2,
                Name: $('#txtNode').val(),
                Argument: args,
                UserId: null,
                UserName: null,
                OrgId: null,
                Org: null,
                PositionId: null,
                Position: null
            });
        }

        return true;
    }

    function OnRoleMode() {
        var role = $('#ddlRoles').val();
        if (!role) {
            alert('请选择审批角色');
            return false;
        }

        _window.control.grid.addRow({
            Action: 3,
            Name: $('#txtNode').val(),
            Argument: null,
            UserId: null,
            UserName: null,
            OrgId: null,
            Org: null,
            PositionId: null,
            Position: null,
            RoleId: role,
            Role: $('#ddlRoles option:selected').text(),
            RoleInDept: RoleInDept.checked
        });

        return true;
    }

    function OnParentUserMode() {
        _window.control.grid.addRow({
            Action: 4,
            Name: $('#txtNode').val(),
            Argument: null,
            UserId: null,
            UserName: null,
            OrgId: null,
            Org: null,
            PositionId: null,
            Position: null,
            RoleId: null,
            Role: null,
            RoleInDept: null
        });

        return true;
    }

    /* TODO: 补充代码, this != _window */
    _window.OnAdd = function () {
        if ((UserMode.checked && OnUserMode()) ||
            (RoleMode.checked && OnRoleMode()) ||
            (ParentUserMode.checked && OnParentUserMode())) {
            __changed = true;
            _window.control.dlgAdd.hide();
        }
    }

    _window.OnAddShow = function () {
        if (!_window.control.gridUsers) {
            _window.control.gridUsers = $('#gridUsers').ligerGrid({
                columns: _window.options.userColumns,
                dataAction: 'local',
                resizable: false,
                frozen: false,
                checkbox: true
            });
        }

        _window.load(_window.control.gridUsers, '/API/Node/GetUsers', {});
    }

    //_window.OnUpdate = function (row) {
    //    alert('Update');
    //}

    _window.OnDelete = function (row) {
        _window.control.grid.deleteRow(row);
    }

    $(document).ready(function () {
        _window.init();
    });
</script>